<template>
  <div>
    <div v-for="(item, index) in menuData" :key="index">
      <!-- 思路: 有子元素使用el-submenu 没有子元素使用el-menu-item -->
      <el-submenu
        class="submenu"
        :index="item.id"
        v-if="item.children && item.children.length > 0"
      >
        <template slot="title">
          <div @click="handleMenuClick(item)">
            <li v-if="isHttpOrHttps(item.url)" class="el-icon-link">123</li>
            {{ item.name }}
          </div>
        </template>
        <!-- 递归调用 -->
        <my-menu-item :menuData="item.children"></my-menu-item>
      </el-submenu>
      <el-menu-item class="menu-item" :index="item.id" v-else>
        <div @click="handleMenuClick(item)">
          <li v-if="isHttpOrHttps(item.path)" class="el-icon-link"></li>
          {{ item.name }}
        </div>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
import {
  Menu,
  MenuItem,
  MenuItemGroup,
  Submenu,
  Container,
  Aside,
  Main,
} from "element-ui";
export default {
  name: "MyMenuItem",
  components: {
    [Menu.name]: Menu,
    [MenuItem.name]: MenuItem,
    [MenuItemGroup.name]: MenuItemGroup,
    [Submenu.name]: Submenu,
    [Container.name]: Container,
    [Aside.name]: Aside,
    [Main.name]: Main,
  },
  props: {
    menuData: {
      type: Object,
      required: true,
    },
  },
  methods: {
    handleMenuClick(item) {
      // 处理菜单点击事件，例如跳转到对应的路由
      if (item.path) {
        if (this.isHttpOrHttps(item.path)) {
          window.open(item.path, "_blank");
        } else {
          this.$router.push({ path: item.path });
        }
      }
    },
    isHttpOrHttps(url) {
      return /^https?:\/\//i.test(url);
    },
  },

  watch: {
    menuData: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
    },
  },
};
</script>
<style scoped>
.submenu div {
  font-size: 15px !important;
}
.menu-item div {
  font-size: 15px !important;
}
</style>
